﻿<div class="modal fade" id="changepasswordModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">修改密码</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
      </div>
      <div class="modal-body">

        <form id="changepwd_form" class="needs-validation" novalidate="">
          <div class="form-group">
            <label class="form-label" for="username">账号</label>
            <input type="text" class="form-control" id="username" value="@ViewBag.User" readonly required>
          </div>
          <div class="form-group">
            <label class="form-label" for="originalpassword">原密码</label>
            <input type="password" class="form-control" id="originalpassword" value="" required minlength="4">
            <div class="invalid-feedback">请输入原始密码</div>
          </div>
          <div class="form-group">
            <label class="form-label" for="password">新密码</label>
            <input type="password" class="form-control" id="password" value="" required minlength="4">
            <div class="invalid-feedback">请输入新密码</div>
          </div>
          <div class="form-group">
            <label class="form-label" for="passwordConfirm">确认密码</label>
            <input type="password" class="form-control" id="passwordConfirm" value="" required minlength="4">
            <div class="invalid-feedback">请重复输入新密码</div>
          </div>
        </form>
        <script>
          // Example starter JavaScript for disabling form submissions if there are invalid fields
          (function () {
            'use strict';
            window.addEventListener('load', function () {
              // Fetch all the forms we want to apply custom Bootstrap validation styles to
              var txtPassword = document.getElementById("password");
              var txtConfirmPassword = document.getElementById("passwordConfirm");
              txtPassword.onchange = ConfirmPassword;
              txtConfirmPassword.onkeyup = ConfirmPassword;
              function ConfirmPassword() {
                txtConfirmPassword.setCustomValidity("");
                if (txtPassword.value != txtConfirmPassword.value) {
                  txtConfirmPassword.setCustomValidity("新密码不匹配.");
                }
              }
            }, false);
          })();

        </script>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          取消
        </button>
        <button type="button" onclick="changepwd()" class="btn btn-primary">
          修改密码
        </button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>

<script type="text/javascript">

  let $changeForm = {};
  document.addEventListener("DOMContentLoaded", function () {

  })
  function showchangewindow() {
    $('#changepasswordModal').modal('toggle');
  }
  function changepwd() {
    var form = document.getElementById("changepwd_form");
    if (form.reportValidity()) {
      //const item = $('#pwd-form').serializeJSON();
      var url = `/Account/ChangePassword?username=${$('#username').val()}&currpwd=${$('#originalpassword').val()}&pwd=${$('#password').val()}`

      $.get(url, function (res) {
        if (res.success) {
          $('#changepasswordModal').modal('toggle');
        } else {
          $.messager.alert('错误', res.err, 'error');
        }
      });

    } else {
      form.classList.add('was-validated')
    }

  }
</script>